<template>
    <div class="canvaPie">
        <!-- <a-spin :spinning="pinningRank"> -->
        <p class="topTitle">TOP10支付通道交易额</p>
        <!-- <a-divider/> -->
        <!-- <a-button-group>
        <a-button>TOP15合作商户交易额</a-button>
        <a-button type="primary">TOP15合作商户交易额</a-button>
        </a-button-group> -->
        <div v-if="rankingList.length>0">
            <div v-for="(item, index) in rankingList" :key="index">
            <span :class="classObject(index)">{{ index+1 }}</span>
            <span>{{ item.channelFlag }}</span>
            <span class="fright">{{ item.totalAmount }}</span>
            <a-divider/>
        </div>
        </div>
        <p v-if="rankingList.length<1 && !pinningRank">暂无支付通道交易</p>
        <!-- </a-spin> -->
    </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
    }
  },
  props: {
    rankingList: {
      type: Array,
      detail: []
    },
    pinningRank: {
      type: Boolean,
      detail: false
    },
  },
  mounted() {
  },
  activated() {},
  methods: {
    classObject(index) {
        return {
        'pieNum': true,
        'one': index === 0,
        'two': index === 1,
        'three': index === 2,
        }
    }
  }
};
</script>

<style lang="less" scoped>
.canvaPie{
    .topTitle{
        color: @blueColor;
        font-weight: bold;
    }
    .ant-divider-horizontal{
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .pieNum{
        display: inline-block;
        margin-right: 15px;
        line-height: 25px;
        width: 25px;
        height: 25px;
        text-align: center;
        background-color: #ccc;
        color: #fff;
        border-radius: 50%;
    }
    .one{
        background-color: @blueColor;
    }
    .two{
        background-color: @redColor;
    }
    .three{
        background-color: @greenColor;
    }
}
</style>
